<html>
<head>

    <title></title>
    <meta name="keyword" content="">
    <meta name="description" content="">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link href="__ROOT__/Public/Admin/js/bootstrap/css/bootstrap.min.css?2025" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="__ROOT__/Public/Admin/css/bootstrap-ie6.css?2025">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="__ROOT__/Public/Admin/css/flow/ie.css?2025">
    <![endif]-->
    <link href="__ROOT__/Public/Admin/css/flow/site.css?2025" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="__ROOT__/Public/Admin/css/flow/flowdesign.css" media="screen" />

    <!--select 2-->
    <link rel="stylesheet" type="text/css" href="__ROOT__/Public/Admin/js/jquery.multiselect2side/css/jquery.multiselect2side.css" media="screen" />

    <link href="__ROOT__/Public/Admin/css/selector/selectorstyle.css" rel="stylesheet"/>
</head>
<body>
<input type="hidden" name="id" value="{$business.ID}"/>
<!-- fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">


        <div class="container">

            <div class="pull-right">
                <button class="btn btn-info" type="button" id="leipi_save">保存设计</button>
                <button class="btn btn-danger" type="button" id="leipi_clear">清空连接</button>
            </div>

            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="javascript:void(0);">正在设计【{$business.Name}流程】</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div id="alertModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>消息提示</h3>
    </div>
    <div class="modal-body">
        <p>提示内容</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">我知道了</button>
    </div>
</div>

<!-- attributeModal -->
<div id="attributeModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:800px;margin-left:-350px">
	<div class="modal-header" style="height: 38px;">
		<span>流程配置</span>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
    <div class="modal-body" style="max-height:500px;"><!-- body --></div>
    <div class="modal-footer" style="padding:5px;">
        <!--<a href="http://www.leipi.org" target="_blank"><img src="http://www.leipi.org/wp-content/themes/leipi/images/leipi.png" alt="雷劈认证 icon" style="width:40px"></a>-->
        <!--a href="#" class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><i class="icon-remove icon-white"></i></a-->
    </div>
</div>



<!--contextmenu div-->
<div id="processMenu" style="display:none;">
    <ul>
        <li id="copy"><i class="icon-check"></i>&nbsp;<span class="_label">复制</span></li>
        <li id="delete"><i class="icon-trash"></i>&nbsp;<span class="_label">删除</span></li>
        <li id="setting"><i class=" icon-wrench"></i>&nbsp;<span class="_label">设置</span></li>
    </ul>
</div>

<div id="canvasMenu" style="display:none;">
    <ul>
        <li id="paste"><i class="icon-share"></i>&nbsp;<span class="_label">粘贴</span></li>
        <li id="refresh"><i class="icon-refresh"></i>&nbsp;<span class="_label">刷新 F5</span></li>
        <li id="add"><i class="icon-plus"></i>&nbsp;<span class="_label">添加步骤</span></li>
        <li id="save"><i class="icon-ok"></i>&nbsp;<span class="_label">保存设计</span></li>
    </ul>
</div>
<!--end div-->

<div class="container mini-layout" id="flowdesign_canvas">
    <!--div class="process-step btn" style="left: 189px; top: 340px;"><span class="process-num badge badge-inverse"><i class="icon-star icon-white"></i>3</span> 步骤3</div-->
</div> <!-- /container -->






<script type="text/javascript" src="__ROOT__/Public/Admin/js/jquery-1.7.2.min.js?2025"></script>
<script type="text/javascript" src="__ROOT__/Public/Admin/js/bootstrap/js/bootstrap.min.js?2025"></script>

<script type="text/javascript" src="__ROOT__/Public/Admin/js/jquery-ui/jquery-ui-1.9.2-min.js?2025" ></script>
<script type="text/javascript" src="__ROOT__/Public/Admin/js/jsPlumb/jquery.jsPlumb-1.3.16-all-min.js?2025"></script>
<script type="text/javascript" src="__ROOT__/Public/Admin/js/jquery.contextmenu.r2.js?2025"></script>
<!--select 2-->
<script type="text/javascript" src="__ROOT__/Public/Admin/js/jquery.multiselect2side/js/jquery.multiselect2side.js?2025" ></script>

<script type="text/javascript" src="__ROOT__/Public/Admin/js/leipi.flowdesign.v2.js?2025"></script>
<script src="__ROOT__/Public/Admin/js/plugins/selector/selector2.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/selector/jquery.ztree.all.js"></script>

<script src="__ROOT__/Public/Admin/js/plugins/layer/layer.min.js"></script>
    
<script type="text/javascript">
    $(function(){
        var alertModal = $('#alertModal'),attributeModal =  $("#attributeModal");
        var businessId = $('input[name=id]').val();
        //消息提示
        mAlert = function(messages,s)
        {
            if(!messages) messages = "";
            if(!s) s = 2000;
            alertModal.find(".modal-body").html(messages);
            alertModal.modal('toggle');
            setTimeout(function(){alertModal.modal("hide")},s);
        };
        //属性设置
        attributeModal.on("hidden", function() {
            $(this).removeData("modal");//移除数据，防止缓存
        });
        ajaxModal = function(url,fn)
        {
            url += url.indexOf('?') ? '&' : '?';
            url += '_t='+ new Date().getTime();
            attributeModal.modal({
                remote:url
            })
            //加载完成执行
            if(fn)
            {
                attributeModal.on('shown',fn);
            }


        };

        function page_reload()
        {
            location.reload();
        }


        console.log({$processData});
        var total = {$total};
        var list = {$processData};

        /*
         php 命名习惯 单词用下划线_隔开
         js 命名习惯：首字母小写 + 其它首字线大写
         */
        /*步骤数据*/
        var processData = {"total":total,"list":list};

        /*创建流程设计器*/
        var _canvas = $("#flowdesign_canvas").Flowdesign({
            "processData":processData
            /*画面右键*/
            ,canvasMenus:{
                "add": function(t) {
                    saveStyle();//先保存当前样式
                    var mLeft = $("#jqContextMenu").css("left"),mTop = $("#jqContextMenu").css("top");
                    //alert("当前位置 left:"+mLeft + " top:" + mTop);

                    ajaxModal('/index.php?m=Admin&c=BusinessProcess&a=add&top='+mTop+'&left='+mLeft+'&businessId='+businessId,function(){

                    });

                },
                "save": function(t) {
                    save();
                },
                //刷新
                "refresh":function(t){location.reload();},
                "paste": function(t) {
                    saveStyle();//先保存当前样式
                    var pasteId = _canvas.paste();//右键当前的ID
                    if(pasteId<=0)
                    {
                        alert("你未复制任何步骤");
                        return ;
                    }
                    var mLeft = $("#jqContextMenu").css("left"),mTop = $("#jqContextMenu").css("top");

                    paste(pasteId,mTop,mLeft,function(){
                        location.reload();
                    });
                }

            }
            /*步骤右键*/
            ,processMenus: {
                "setting": function(t) {
                    var activeId = _canvas.getActiveId();//右键当前的ID
                    ajaxModal('/index.php?m=Admin&c=BusinessProcess&a=setting&processId='+activeId,function(){

                    });
                },
                "copy":function(t)
                {
                    //var activeId = _canvas.getActiveId();//右键当前的ID
                    _canvas.copy();//右键当前的ID
                },
                "delete":function(t)
                {
                    var activeId = _canvas.getActiveId();//右键当前的ID
                    remove(activeId);
                }
            }
            ,fnRepeat:function(){
                //alert("步骤连接重复1");//可使用 jquery ui 或其它方式提示
                mAlert("步骤连接重复了，请重新连接");

            }
            ,fnClick:function(){
                //alert("单击了节点");
            }
            ,fnDbClick:function(){
                //alert("双击了节点");
            }
        });

        //粘贴
        function paste(id,top,left,callback) {
            $.ajax("{:U('Admin/BusinessProcess/paste')}",{
                type : 'POST',
                dataType : 'json',
                data : {
                    processId : id,
                    top : top,
                    left : left
                },
                success : function(data){
                    console.log(data);
                    if(data.status === 1){
                        callback && callback();
                    }else{
                        alert(data.info);
                    }
                },
                error : function(){
                    alert('粘贴失败');
                }
            });
        }

        //保存设计
        function save(){
            var processInfo = _canvas.getProcessInfo();//连接信息
            $.ajax("{:U('Admin/BusinessProcess/save')}",{
                type : 'POST',
                dataType : 'json',
                data : {
                    businessId : businessId,
                    data : processInfo
                },
                success : function(data){
                    console.log(data);
                    if(data.status === 1){
                        alert(data.info);
                    }else{
                        alert(data.info);
                    }
                },
                error : function(){
                    alert('保存失败');
                }
            });
        }

        //保存样式
        function saveStyle() {
            var processInfo = _canvas.getProcessInfo();//连接信息
            $.ajax("{:U('Admin/BusinessProcess/saveStyle')}",{
                type : 'POST',
                dataType : 'json',
                data : {
                    businessId : businessId,
                    data : processInfo
                },
                success : function(data){
                    console.log(data);
                },
                error : function(){

                }
            });
        }

        //删除
        function remove(id){
            $.ajax("{:U('Admin/BusinessProcess/delete')}",{
                type : 'POST',
                dataType : 'json',
                data : {
                    processId : id
                },
                success : function(data){
                    location.reload();
                },
                error : function(){
                    alert('删除失败');
                }
            });
        }


        /*保存*/
        $("#leipi_save").bind('click',function(){
            save();
        });
        /*清除*/
        $("#leipi_clear").bind('click',function(){
            if(_canvas.clear())
            {
                //alert("清空连接成功");
                mAlert("清空连接成功，你可以重新连接");
            }else
            {
                //alert("清空连接失败");
                mAlert("清空连接失败");
            }
        });

        //5秒保存一次样式

        setInterval(function(){
            //saveStyle();
        },5000);




    });


</script>

</body>
</html>